<template>
    <!-- 待收费 -->
    <div class="receive">
        <navBar :titleName="titleName"></navBar>
        <search @messageData="getData" style="margin-top: 42px;" placeText="輸入病人姓名"
                textInfo="查询"></search>
        <nut-tab>
            <nut-tab-panel tabTitle="代收费">
                <myrow v-for="(item,index) in chargesList" :key="index"
                       style="height: 30px;border-bottom: 1px solid #DDDFE6;padding-top: 6px;"
                       @click="showCharges(item)">

                    <nut-col :span="20" style="color: #999999;text-align: left;">
                        <div class="flex-content">{{item.lastUpdateBy}}:{{item.orderNo}}</div>
                    </nut-col>
                    <nut-col :span="4" style="color: #999999;text-align: right;">
                        <div class="flex-content flex-content-light">¥{{item.price | formatPrice}}</div>
                    </nut-col>
                </myrow>
            </nut-tab-panel>
            <!--<nut-tab-panel tabTitle=""></nut-tab-panel>-->
            <!--<nut-tab-panel tabTitle=""></nut-tab-panel>-->
        </nut-tab>
    </div>
</template>

<script>
    /* eslint-disable no-console,no-undef,no-unused-vars */


    import search from '@/components/common/search.vue'
    import myrow from '@/components/common/my-row.vue'
    import navBar from '@/components/common/navBar.vue'

    export default {
        name: "costList",
        components: {
            search,
            navBar,
            myrow
        },
        data() {
            return {
                titleName: "收费管理",
                chargesList: [],
                msg: 2
            }
        },
        filters: {
            formatPrice: function (price) {
                return new Number((price || 0) / 100).toFixed(2);
            },
            formatDate: function (time) {
                if (time != null && time != "") {
                    let date = new Date(time);
                    return formatDate(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            },
            formatTime: function (time) {
                if (time != null && time != "") {
                    let date = new Date(time);
                    return formatDate(date, "hh:mm:ss");
                } else {
                    return "";
                }
            }
        },
        created() {
            this.getDoctorChargesList();
        },
        methods: {
            //代收费详细界面
            showCharges: function (item) {
                item.price = "" + item.price;
                this.$router.push({
                    name: 'chargesInfo', params: {charges: item}
                });
            },
            getDoctorChargesList: function () {
                this.API.POST(this.ApiUrl.POST_GET_CHARGES, {
                    doctorId: this.$store.state.doctor.doctorId
                }).then(({data}) => {
                    if (data.code === 1200) {
                        this.chargesList = data.data;
                    }
                }).catch(err => {
                    console.log("getUserInfoByOpenid::err------", err);
                });
            },
            getData(val) {
                //TODO:后续获取搜索框的传递回来的值
                console.log("receive children's value : " + val);
                if (val === "") {
                    this.getVisit();
                    return;
                }
                this.API.GET(this.ApiUrl.GET_PRE_VISIT_PATIENT, {
                    params: {
                        pname: val,
                    }
                }).then(({data}) => {
                    console.log("病人列表------", data);
                    if (data.code === 1200) {
                        this.list = data.data;
                    }
                }).catch(err => {
                    console.log("getPatients::err------", err);
                });
            },
            myClickCol: function (item) {
                /*this.$router.push({
                    name: 'acceptInfo', params: item
                });*/
            },
        }
    }
</script>
<style>
    .nut-tab-title based {
        max-width: 25% !important;
    }

    .nav-bar {
        max-width: 100% !important;
    }

    .recive-nut nut-tab-title {
        border-bottom: 1px solid #EDEDED;
        width: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        height: 50px;
        line-height: 48px;
        box-sizing: border-box;
        position: relative;
        max-width: 34%;
    }

    .nut-tab {
        position: relative;
        border: 1px solid #eee;
        padding: 10px;
        font-size: 12px;
        background: #eee;
        background-color: white;
    }
</style>